<script setup>
import { useFloating, autoUpdate, offset, flip, shift } from "@floating-ui/vue";
import { bindingHideMenu, bindingEvent, switchOpen } from '../dropmenu/_dropdown.js';
import _ from "lodash";
import { ref, defineProps } from 'vue'
var props = defineProps({
    icon: {
        type: String,
        default: ''
    },
    label: {
        type: String,
        default: ''
    },
})
const current = ref(null)
const floating = ref(null)
const open = ref(false)
const { floatingStyles } = useFloating(current, floating, {
    placement: "right-start",
    middleware: [offset(0), flip(), shift()],
    whileElementsMounted: autoUpdate,
});
bindingHideMenu(open)
const switchOpenFn = () => {
    switchOpen(open)
}

</script>
<template>
    <div class="dropdown-item w-100 d-flex" ref="current" @click="switchOpenFn">
        <div class="dropdown-icon">
            <i v-if="icon" :class="icon"></i>
        </div>
        <div class="dropdown-label">
            {{ label }}
        </div>
        <div class="dropdown-suffix">
            <i class="iconfont te-i-jiantou_liebiaoxiangyou"></i>
        </div>
        <div class="dropdown shadow-lg rounded-3" ref="floating" :style="floatingStyles" v-if="open">
            <span class="dropdown-body">
                <slot></slot>
            </span>
        </div>
    </div>
</template>
<style></style>